<template>
  <form action="#" method="post" :model="loginForm">
        <div class="boxUnit">
          <span id="loginFont">登录</span>
          <p id="clickMeRegister">
            没有账号？
            <span class="rotateButton" @click="loginRotate">点我注册</span>
          </p>
          <router-view />
        </div>
        <div class="boxUnit">
          <input
            required="required"
            class="input_content"
            type="text"
            id="userName"
            v-model="loginForm.userName"
            placeholder="用户名"
          />
        </div>
        <div class="boxUnit">
          <input
            type="password"
            class="input_content"
            required="required"
            id="userPassword"
            v-model="loginForm.passWord"
            placeholder="密码"
          />
        </div>
        <div class="boxUnit">
          <input
            type="text"
            required="required"
            class="checkUnit input_content"
            id="checkcode"
            v-model="loginForm.code"
            placeholder="验证码"
          />
          <img
            :src="checkNodeNet"
            alt="验证码"
            title="点击图片切换验证码"
            width="120px"
            height="50px"
            @click="getCheckCode"
          />
        </div>
        <div class="rememberMe" style="float:left text-align:left">
          <input type="checkbox" v-model="keepLogin" /> 记住我
        </div>
        <div class="boxUnit">
          <input
            type="submit"
            class="input_content"
            value="登录"
            id="loginButton"
            @click.prevent="login"
          />
        </div>
      </form>
</template>

<script>
import axios from 'axios'
export default {
    name:"LoginForm",
    data(){
        return{
            loginForm:{
            userName:"admin",
            passWord:"123456",    
            code:""
            },
            keepLogin: false,
            checkNodeNet: "WebApps/getCode",
        }
    },methods: {
        // 登录验证
        loginVerify: function () {
        // var code = Cookies.get('code');
        // console.log(code);
        var codeReg = /[a-zA-Z0-9]{4}/;
        if(!this.loginForm.code.match(codeReg)){
            alert("请输入正确的验证码");
            return false;
        }
        var nameReg = /(^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]{0,2}$)/;
        if (this.loginForm.userName.match(nameReg)) {
            alert("用户名长度最短需为3位！");
            return false;
        }
        var passwordReg = /^[a-zA-Z0-9]{0,5}$/;
        if (this.loginForm.passWord.match(passwordReg)) {
            alert("请输入正确的密码！");
            return false;
        }
        return true;
        },
        // 实现登录
        login: function () {
        if(this.loginVerify() == false) return;
        //  this.loginForm.password.value = md5(this.loginForm.password.value);
        axios.post("/WebApps/loginServlet",this.loginForm)
            .then(response => {
                if(response.data.code !== 200) {
                    //console.log(response);
                    this.$message.error('登陆失败！');
                    return;
                }
                this.$message.success("登陆成功！");
                this.$store.commit('setName',this.loginForm.userName);
                this.$store.commit('setPhone',response.data.data.phone);
                this.$store.commit('setEmail',response.data.data.email);
                this.$store.commit('setToken',response.data.data.token);
                this.$router.push('/detail');
                if(this.keepLogin != false){
                sessionStorage.setItem('store', JSON.stringify(this.$store.state));
                }
            },
            function(err) {
                console.log(err);
            }
            );
        },
        // 刷新验证码
        getCheckCode: function () {
            const num = Math.ceil(Math.random()*10);
            this.checkNodeNet = "WebApps/getCode" + "?" + num;
            console.log("Checknode flash success");
        },
        // 调用父组件中的旋转方法
        loginRotate(){
            this.$parent.loginRotate();
        }
    }
}
</script>

<style>

</style>